<template>
	<el-dialog  v-model="show" title="投诉订单" width="1000" align-center>
    <!-- 订单信息 -->
    <div class="title">订单信息</div>
      <table class="table1 table-all" cellpadding="0" cellspacing="0" style="width:100%;margin-bottom: 10px;">
        <!--第1行-->
        <tr align="center">
          <td class="thBack">订单号</td>
          <td>15245662656220065262</td>
          <td class="thBack">订单状态</td>
          <td style="color:#F6921E !important">支付成功</td>
        </tr>
        <!--第2行-->
        <tr align="center">
          <td class="thBack">开门时间</td>
          <td>2024-05-15——12:22:20</td>
          <td class="thBack">关门时间</td>
          <td>2024-05-15——12:22:20</td>
        </tr>
        <!--第3行-->
        <tr align="center">
          <td class="thBack">支付时间</td>
          <td colspan="3">2024-05-15——12:22:20</td>
        </tr>
      </table>
    <!-- 支付信息 -->
    <div class="title">支付信息</div>
    <table class="table1 table-all" cellpadding="0" cellspacing="0" style="width:100%;margin-bottom: 10px;">
        <!--第1行-->
        <tr align="center">
          <td class="thBack">总金额</td>
          <td colspan="5">15</td>
        </tr>
        <!--第2行-->
        <tr align="center">
          <td class="thBack" style="width:128px">会员金币支付</td>
          <td style="width:128px">0</td>
          <td style="width:128px" class="thBack">惠家红包抵扣</td>
          <td style="width:128px">0</td>
          <td style="width:128px" class="thBack">乐汇红包抵扣</td>
          <td style="width:128px">0</td>
        </tr>
        <!--第3行-->
        <tr align="center">
          <td class="thBack">实际支付金额</td>
          <td colspan="5" style="text-align: left;">15</td>
        </tr>
      </table>
    <!-- 设备信息 -->
    <div class="title">设备信息</div>
    <table class="table1 table-all" border="0" cellpadding="0" cellspacing="0" style="width:100%;margin-bottom: 10px;">
        <!--第1行-->
        <tr align="center">
          <td class="thBack">设备名称</td>
          <td>伯克材料3668649</td>
          <td>设备IMEI号</td>
          <td>892512361654622</td>
        </tr>
        <!--第2行-->
        <tr align="center">
          <td class="thBack">投放地址</td>
          <td>常熟市新颜路1号</td>
          <td class="thBack">最新同步时间</td>
          <td>2024-05-15——12:22:29</td>
        </tr>
        <!--第3行-->
        <tr align="center">
          <td class="thBack">监控回放</td>
          <td colspan="3" style="color:#0000FF !important;text-align: left;">查看监控</td>
        </tr>
      </table>
    <!-- 商品信息 -->
    <div class="title">商品信息</div>
    <!-- 表格数据 -->
		<div class="tables">
				    <el-table :data="tableData" style="">
				    	<el-table-column prop="" label="商品图片"  width="80">
                <template #default="scope">
                  <el-image src="/src/assets/order/bottle.png" />
                </template>
              </el-table-column>
				    	<el-table-column prop="order_no" label="商品名称" />
				    	<el-table-column prop="no" label="商品条码" />
				    	<el-table-column prop="num" label="商品数量" width="80"/>
				    	<el-table-column prop="price" label="商品价格" width="80"/>
				    	<el-table-column prop="pay" label="会员金币支付"/>
				    	<el-table-column prop="deduction1" label="惠家红包抵扣"/>
				    	<el-table-column prop="deduction2" label="乐汇红包抵扣"/>
				    	<el-table-column prop="redEnvelope" label="赠送惠家红包"/>
				    	<el-table-column prop="payReally" label="实际支付" width="80"/>
				    </el-table>
            <!-- 底部分页 -->
		        <div class="page_number">
		        	<el-pagination v-model:current-page="pager.currentPage" v-model:page-size="pager.pageSize" 
		        		:disabled="!pager.total"  layout="prev, pager, next, jumper,total" :total="pager.total"
		        		@size-change="handleSizeChange" @current-change="handleCurrentChange"/>
		        </div>
		</div>
    <template #footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="submit(ruleFormRef)" color="#0071bb">确定</el-button>
            <el-button @click="close()">取消</el-button>
        </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { defineProps,defineEmits,toRefs } from 'vue';
const emit = defineEmits(['close','submit']);
const props = defineProps<{ formData:any }>();
// 分页
const pager = ref({
	currentPage:1,
	pageSize:10,
	total:10,
})
// 表格数据
const tableData = ref([
  {
    id:1,
    order_time:'2024-05-15——09:38:11',
    no:'656445132121231',
    order_no:'20214115425225',
    device_name:'康师傅茉莉蜜茶 500ml',
    num:1,
    price:15,
    pay:0,
    deduction1:11,
    deduction2:11,
    payReally:15,
    redEnvelope:1,
  },
])
// 取消
const close = () => {
    emit('close')
}
// 确定
const submit = () => {
  emit('submit')
}
const show = ref<boolean>(true)
</script>

<style lang="scss" scoped>
.df{
    display: flex;
    align-items: center;
}
.fd{
  font-weight:bold;
}
.order,.pay,.device{
  color: #4D4D4D;
  margin-bottom: 10px;
}
.title{
  color: #4D4D4D;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}
table{
  border-collapse: collapse;
}
tr {
  text-align: left;
  font-size: 12px;

th,
td {
  border: 1px solid #b8b8b8;
  border-radius: 2px 0px 0px 0px;
  padding: 4px 10px;
  text-align: left;
  font-size: 12px;
}
}
.dialog-footer{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
}
</style>